
<!--
    Example usage: http://dudeitworks.com/heatgrid/heatgrid.html?dataUrl=data.xml&zoom=15&colors=BDC6DE,949CCE,6373B5,3152A5,083194,082984,08296B,08215A,00184A
-->

<html>

    <head>

        <title>Heatgrid</title>

        <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                // Get the heatgrid configuration parameters from the url.
                var urlData = getUrlData();
                var dataUrl = urlData['dataUrl'];
                var zoom = urlData['zoom'];
                var colors = urlData['colors'].split(",");

                $.ajax({
                    type: "GET",
                    url: dataUrl,
                    dataType: "xml",
                    success: function(xml) {

                        // Populate hg, the set of heatgrid parameters by parsing the XML file.
                        var hg = {
                            numRows: $(xml).find('numRows').text(),
                            numColumns: $(xml).find('numColumns').text(),
                            rowHeight: $(xml).find('rowHeight').text(),
                            columnWidth: $(xml).find('columnWidth').text(),
                            originLatitude: $(xml).find('originLatitude').text(),
                            originLongitude: $(xml).find('originLongitude').text(),
                            weights: new Array(),
                            zoom: zoom,
                            colors: colors
                        };

                        var i = 0;
                        $(xml).find('w').each(function() {
                            var weight = $(this).text();
                            hg.weights[i++] = weight;
                        });

                        initHeatgrid(hg);
                    }
                });
            });

            function initHeatgrid(hg)
            {
                // Enforce types.
                var numRows = parseInt(hg.numRows);
                var numColumns = parseInt(hg.numColumns);
                var rowHeight = parseFloat(hg.rowHeight);
                var columnWidth = parseFloat(hg.columnWidth);
                var originLatitude = parseFloat(hg.originLatitude);
                var originLongitude = parseFloat(hg.originLongitude);

                var weights = hg.weights;
                for (var i = 0; i < weights.length; i++) {
                    weights[i] = parseFloat(weights[i]);
                }

                var zoom = parseInt(hg.zoom);
                var colors = hg.colors;

                // Normalize the weights between 0.0 and 1.0.
                var minWeight = weights[0];
                var maxWeight = weights[0];
                for (var i = 0; i < weights.length; i++) {
                    if (weights[i] < minWeight)
                        minWeight = weights[i];
                    if (weights[i] > maxWeight)
                        maxWeight = weights[i];
                }

                var weightSpread = maxWeight - minWeight;
                var normalizationRatio = 1.0 / weightSpread;

                for (var i = 0; i < weights.length; i++) {
                    weights[i] = (weights[i] - minWeight) * normalizationRatio;
                }

                // Setup the map.
                var map = new google.maps.Map(document.getElementById('map'), {
                    'zoom': zoom,
                    'center': new google.maps.LatLng(originLatitude, originLongitude),
                    'mapTypeId': google.maps.MapTypeId.ROADMAP
                });

                // Draw the heatgrid cells as rectangle overlays.
                var i = 0;
                for (var r = 0; r < numRows; r++) {
                    for (var c = 0; c < numColumns; c++) {
                        var latLngBounds = new google.maps.LatLngBounds(
                            new google.maps.LatLng(originLatitude + rowHeight*r, originLongitude + columnWidth*c),
                            new google.maps.LatLng(originLatitude + rowHeight*(r+1), originLongitude + columnWidth*(c+1))
                        );

                        var rectangle = new google.maps.Rectangle({
                            map: map,
                            bounds: latLngBounds,
                            fillColor: getColorForWeight(weights[i++], colors),
                            fillOpacity: 0.5,
                            strokeColor: '#FFFFFF',
                            strokeOpacity: 0.75,
                            strokeWeight: 0
                        });
                    }
                }
            }

            /*
             * Weight should be between 0.0 and 1.0.
             */
            function getColorForWeight(weight, colors)
            {
                // Enforce weight type and range.
                weight = parseFloat(weight);
                if (weight < 0.0)
                    weight = 0.0;
                if (weight > 1.0)
                    weight = 1.0;

                // Index into the spectrum.
                return colors[Math.round(weight * (colors.length - 1))];
            }

            function getUrlData()
            {
                var data = {};
                var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
                    data[key] = value;
                });
                return data;
            }

        </script>

        <style type="text/css">

            body
            {
                background-color: #000;
            }

            #map
            {
                width: 100%;
                height: 100%;
            }
            
        </style>

    </head>

    <body>

        <div id="map"></div>
        
    </body>

</html>